<script setup>
import { ref } from 'vue';

const images = ref([
  { path: 'https://via.placeholder.com/300x200', size: 'small' },
  { path: 'https://via.placeholder.com/400x300', size: 'medium' },
  { path: 'https://via.placeholder.com/600x400', size: 'large' },
]);

const addImage = (path, size = 'small') => {
  images.value.push({ path, size });
};

const updateImagePath = (index, newPath) => {
  if (index >= 0 && index < images.value.length) {
    images.value[index].path = newPath;
  }
};
</script>

<template>
  <div class="photo-wall-container">
    <div v-for="(image, index) in images" :key="index" :class="['photo', image.size]">
      <img :src="image.path" :alt="`Photo ${index + 1}`" @click="() => updateImagePath(index, prompt('请输入新的图片路径', image.path))" />
    </div>
  </div>
</template>

<style scoped>
.photo-wall-container {
  position: relative;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee, #8fd3f4);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.photo {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.photo.small {
  grid-row: span 2;
}

.photo.medium {
  grid-row: span 3;
}

.photo.large {
  grid-row: span 4;
}
</style>